
import React from 'react'; 
import { inject, observer } from 'mobx-react'; 
import './common-keyboard-num.less'; 
import '../../../assets/iconfont/iconfont.css';

@inject('selloutStore') @observer
class CommonKeyboardNum extends React.Component{

  state = {result:''}


    
  itemClick=(e)=>{    
      let temp = this.state.result;
  	  let value = e.target.value;
      
      if(value>=0&&value<=9){
        temp = temp.concat(value);  
      }if(value==='.'){
        
         if(!temp.includes(".")){
                temp = temp.concat(value);
           }
      }

     if(temp.startsWith('.')){
        temp="0".concat(temp);
      } 
   
  	  this.setState({result:temp});  

      if(this.props.getResult){ 
              this.props.getResult(temp)
      }
    //   if(value.startsWith('.')){
    //     value="0".concat(value);
    //   } 
      if(this.props.getvalue){
          this.props.getvalue(value);
      } 
     
  }

  delClick=(e)=>{ 

     if(this.props.getvalue){
          this.props.getvalue(e.type);
      } 

      let temp = this.state.result;
      temp = temp.substring(0,temp.length-1);
      this.setState({result:temp});  
      if(this.props.getResult){ 
        this.props.getResult(temp)
      } 
  }


 
    render(){  
        

        return(
             <div className="chengzhong" >
                 <div className="button-combination">
                    <div className="item-main">
                        <input type='button' className='btn-item' value='1' onClick={this.itemClick}/>
                        <input type='button' className='btn-item' value='2' onClick={this.itemClick}/>
                        <input type='button' className='btn-item' value='3' onClick={this.itemClick}/> 
                    </div>
                 </div> 
                  <div className="button-combination">
                    <div className="item-main">
                        <input type='button' className='btn-item' value='4' onClick={this.itemClick}/>
                        <input type='button' className='btn-item' value='5' onClick={this.itemClick}/>
                        <input type='button' className='btn-item' value='6' onClick={this.itemClick}/> 
                    </div>
                 </div>
                 <div className="button-combination">
                    <div className="item-main">
                        <input type='button' className='btn-item' value='7' onClick={this.itemClick}/>
                        <input type='button' className='btn-item' value='8' onClick={this.itemClick}/>
                        <input type='button' className='btn-item' value='9' onClick={this.itemClick}/> 
                    </div>
                 </div> 
                 <div className="button-combination">  
                    <div className="item-main">
                        {this.props.Whetherpoint === true && <input type='button' className='btn-item' value='.' onClick={this.itemClick}/>}
                        <input type='button' className='btn-item' value='0' onClick={this.itemClick}/>
                        <button className={this.props.Whetherpoint === true ?'btn-item':'btn-item newflex'}   onClick={this.delClick}><i className='iconfont icon-order_btn_back'></i></button> 
                    </div>
                 </div> 
            </div> 
            
        )
    }
}


export default CommonKeyboardNum;